<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全选,反选练习</title>
    <script>
      // $(function(){})  window.onload
      $(function () {
        $("#allBtn").click(() => {
          // 全选
          // alert("全选")
          $("input[name=item]").prop("checked", true);
          $("input[name=all]").prop("checked", true);
        });
        $("#revertBtn").click(() => {
          // 反选
            //第一种  遍历每个节点, 然后获取源节点的状态,然后取反
            // $("input[name=item]").each(function(){
            //     // this 就是遍历出俩的每个元素的dom对象
            //     // console.log(this)
            //     $(this).prop("checked", !$(this).prop("checked"))
            // })

            // 第二种
          $("input[name=item]").prop("checked", function(index, attr){
            console.log("prop的第二个参数:",index, attr)
            return !attr
          });
          // 判断所有的item是否被选中
          isAllChecked();

        });
        $("#noneBtn").click(function () {
          // 全不选
          $("input[name=item]").prop("checked", false);
          $("input[name=all]").prop("checked", false);
        });

        $("input[name=item]").each(function () {
            // 先遍历
            $(this).click(function(){
                // 判断所有的item是否被全选
                isAllChecked();
            })
        });
        $("input[name=all]").click(function () {
            // this 指的是调用click函数的对象 Dom对象
            console.log($(this).prop("checked"))
            $("input[name=item]").prop("checked", $(this).prop("checked"));
        });
      });

       // 判断所有的item是否被全选
      function isAllChecked(){
        let itemLength = $("input[name=item]").length
        let itemCheckedLength = $("input[name=item]:checked").length
        if(itemLength === itemCheckedLength){
            // 已经全部选中了
            $("input[name=all]").prop("checked", true);
        }else{
            // 没有被全部选中
            $("input[name=all]").prop("checked", false);
        }
      }
    </script>
  </head>
  <body>
    <form action="">
      你的爱好是
      <input name="all" type="checkbox" />全选
      <br />
      <input name="item" type="checkbox" value="打球" />打球
      <br />
      <input name="item" type="checkbox" value="打游戏" />打游戏
      <br />
      <input name="item" type="checkbox" value="编程" />编程
      <br />

      <button id="allBtn" type="button" value="全选">全选</button>
      <button id="revertBtn" type="button" value="全选">反选</button>
      <button id="noneBtn" type="button" value="全选">全不选</button>
      <button id="submit" type="submit" value="全选">提交</button>
    </form>
  </body>
</html>
